<template>
  <CustomTabs :tabsData="tabsData" :selectVal="selectVal" @onChange="selectTag">
    <div slot="headerRgt" class="headerRgt">
      <CustomButton
        v-if="isLogin && isORG"
        class="customBtn"
        type="primary"
        icon="el-icon-plus"
        @click="showModal"
      >
        创建培训
      </CustomButton>
    </div>
    <CustomFilter
      :filterData="filterData"
      :sortData="sortData"
      :sortVal="sortVal"
      @changeTag="changeTag"
      @changeSort="changeSort"
    >
      <div>共{{ totalItems }}场培训</div>
    </CustomFilter>
    <AddFrom ref="AddFrom" type="TRAIN" @success="success"></AddFrom>
  </CustomTabs>
</template>

<script>
import { getToken, getUserInfo } from '@/utils/auth'
import CustomTabs from '@/components/CustomTabs.vue';
import CustomFilter from '@/components/CustomFilter.vue';
import CustomButton from '@/components/CustomButton.vue';
import AddFrom from '@/components/AddFrom.vue';
import { mapActions } from 'vuex';
export default {
  name: 'Banner',
  components: { CustomTabs, CustomFilter, AddFrom, CustomButton },
  props: {
    totalItems: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabsData: [
        {
          name: '全部培训',
          value: 'ALL',
        },
        {
          name: '我参与的',
          value: 'MyJoined',
        },
      ],
      // 选择大的分类
      selectVal: 'ALL',
      // 过滤数据
      filterData: [
        {
          name: '分类标签',
          value: '',
          selectVal: 'ALL',
          tabList: [
            {
              name: '全部',
              value: 'ALL',
            },
          ],
        },
        {
          name: '状态',
          value: '',
          selectVal: 'ALL',
          tabList: [
            {
              name: '全部',
              value: 'ALL',
            },
            {
              name: '未开始',
              value: 'NO_START',
            },
            {
              name: '直播中',
              value: 'START',
            },
            {
              name: '已结束',
              value: 'END',
            },
          ],
        },
      ],
      // 筛选数据
      sortData: [
        {
          name: '综合排序',
          value: 'ALL',
        },
        {
          name: '最新',
          value: 'CREATE_TIME',
        },
        {
          name: '最热',
          value: 'JOINS',
        },
      ],
      sortVal: 'ALL',
    };
  },
  computed: {
    isLogin() {
      return !!getToken();
    },
    isORG() {
      return getUserInfo()?.role === 'ORG';
    }
  },
  created() {},
  mounted() {
    const status = this.$route.query.status;
    if(status === 'add') {
      this.showModal();
    }
    this.getType();
  },
  methods: {
    ...mapActions(['getAllType']),
    // 获取分类
    async getType() {
      try {
        const resData = await this.getAllType({ type: 'TRAIN' });
        this.filterData[0].tabList = [
          {
            name: '全部',
            value: 'ALL',
          },
          ...resData.map((item) => {
            return {
              name: item.name,
              value: item.objectId,
            };
          }),
        ];
        this.$emit('changeFilter');
      } catch (error) {
        console.error(error);
      }
    },
    // 改变大的分类 全部/我的
    selectTag(tab) {
      if (tab === this.selectVal) return;
      this.selectVal = tab;
      this.$emit('changeFilter');
    },
    // 改变tag
    changeTag(value, index) {
      this.filterData[index].selectVal = value;
      this.$emit('changeFilter');
    },
    // 改变排序
    changeSort(val) {
      this.sortVal = val;
      this.$emit('changeFilter');
    },
    showModal() {
      this.$refs.AddFrom.dialogVisible = true;
    },
    // 创建成功
    success() {
      this.$emit('updateData');
    }
  },
};
</script>
<style lang="scss" scoped>
.headerRgt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  .customBtn {
    padding: 10px 30px;
  }
}
</style>
